<template>
  <van-popup v-model="show" position="bottom" :style="{ height: '100%' }">
    <div class="Census page">
      <van-nav-bar title="每日账单" left-arrow @click-left="$router.go(-1)"/>
      <van-list class="page-content" v-model="page.loading" :finished="page.finished" finished-text="没有更多了" @load="getList">
        <div class="list-item" v-for="(item, index) in list" :key="index">
          <template v-if="$store.getters.ifIntroducer">
            <div class="list-group flex-row" style="padding-top: 0.25rem; padding-bottom: 0.25rem;">
              <div class="flex-row">
                <img :src="'./img/day.png'" style="width: 0.6rem; height: 0.6rem; border-radius: 50%;"/>
                <span class="font-black" style="font-size: 14px; margin-left: 0.28rem;">¥ {{ item.realIncome }}</span>
              </div>
              <div class="font-blue">{{ new Date(item.date).format('yyyy-MM-dd') }}</div>
            </div>
            <div class="list-group justify">
              <div class="list-row">
                <span class="label-text">订单总数</span>
                <span class="font-blue">{{ item.totalOrderNum }}</span>
              </div>
              <div class="list-row">
                <span class="label-text">退款金额</span>
                <span class="font-red">{{ item.realIncome }}元</span>
              </div>
              <div class="list-row">
                <span class="label-text">分成比例</span>
                <span>{{ item.virtualProportion }}%</span>
              </div>
            </div>
          </template>
          <template v-else>
            <div class="list-group flex-row" style="padding-top: 0.25rem; padding-bottom: 0.25rem;">
              <div class="flex-row">
                <img :src="'./img/day.png'" style="width: 0.6rem; height: 0.6rem; border-radius: 50%;"/>
                <span class="font-black" style="font-size: 14px; margin-left: 0.28rem;">¥ {{ item.realIncome }}</span>
              </div>
              <div class="font-blue">{{ new Date(item.date).format('yyyy-MM-dd') }}</div>
            </div>
            <div style="background: #f8f9fd; margin: 0.3rem 0; box-sizing: border-box; border-radius: 0.13rem;
              box-sizing: border-box; padding: 0.3rem 0.65rem; text-align: center;" class="flex-col">
              <div class="flex-row">
                <div class="flex-col" v-for="type in text1" :key="type.key">
                  <span class="font-blue" style="font-size: 16px;">{{ item[type.key] }}</span>
                  <span class="font-gray" style="font-size: 12px; margin-top: 0.1rem;">{{ type.label }}</span>
                </div>
              </div>
              <div class="flex-row" style="margin-top: 0.2rem;">
                <div class="flex-col" v-for="type in text2" :key="type.key">
                  <span class="font-blue" style="font-size: 16px;">{{ item[type.key] }}</span>
                  <span class="font-gray" style="font-size: 12px; margin-top: 0.1rem;">{{ type.label }}</span>
                </div>
              </div>
            </div>
            <div class="list-group justify">
              <div class="list-row">
                <span class="label-text">应分成</span>
                <span class="font-red">{{ item.shouldIncome }}元</span>
              </div>
              <div class="list-row">
                <span class="label-text">实际分成</span>
                <span class="font-red">{{ item.realIncome }}元</span>
              </div>
              <div class="list-row">
                <span class="label-text">分成比例</span>
                <span>{{ item.virtualProportion }}%</span>
              </div>
              <div class="list-row">
                <span class="label-text">税率</span>
                <span>{{ item.taxRate * 100 }}%</span>
              </div>
              <div class="list-row">
                <span class="label-text">退款总额</span>
                <span class="font-red">{{ item.refundMoney }}元</span>
              </div>
              <div class="list-row">
                <span class="label-text">退款扣除入账</span>
                <span class="font-red">{{ item.refundIncome }}元</span>
              </div>
            </div>
          </template>
        </div>
      </van-list>
    </div>
  </van-popup>
</template>

<script>
export default {
  data() {
    return {

      search: {
        userId: this.$store.state.userInfo.userId
      },

      page: {
        page: 1,
        size: 10,
        loading: false,
        finished: false
      },
      
      list: [],
      text1: [
        { label: '总订单流水', key: 'totalOrderMoney', class: 'font-red', unit: '元' },
        { label: '订单总数', key: 'totalOrderNum', class: '', unit: '' },
        { label: '平均总订单金额', key: 'avgTotalOrderMoney', class: '', unit: '元' },
      ],
      text2: [
        { label: '买宝收入', key: 'loseOrderIncome', class: 'font-red', unit: '元' },
        { label: '买宝数', key: 'loseOrderNum', class: '', unit: '' },
        { label: '设备成本入账', key: 'equipmentCostIncome', class: '', unit: '元' },
      ],

      show: true

    };
  },
  methods: {
    getList() {
      let sPage = JSON.parse(JSON.stringify(this.page));
      let page = sPage.page, size = sPage.size;
      this.page.loading = true;
      
      let search = JSON.parse(JSON.stringify(this.search));
      let query = { ...search, page, size };
      let url = '/api/orderFormController/agencyDayIncomeInfo';
      this.$axios.get(url, query).then(res => {
        if(search.vague != this.search.vague) return ;
        let json = res || {}; 
        let list = json.list || [];
        list = list.filter(item => {
          return this.search.vague != 1 || item.deviceType;
        });
        this.list.push( ...list );
        let finished = json.isLastPage ? true : false;
        this.page = { ...sPage, page: sPage.page + 1, loading: false, finished };
      }).catch(err => {
        this.page = { ...sPage, loading: false, finished: true };
      });
    },
    searchFunc() {
      this.page = { page: 1, size: 10, loading: false, finished: false };
      this.list = [];
      this.getList();
    },
    changeNav(item) {
      this.search.vague = item.value;
      this.searchFunc(); 
    }
  },
  mounted() { 
    this.searchFunc();
  }
};
</script>

<style lang="less">
.Census {
  .detail-nav {
    height: 1.2rem;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    .detail-nav-item {
      height: 0.67rem;
      line-height: 0.67rem;
      padding: 0 0.37rem;
      color: #fff;
      font-size: 14px;
      border-radius: 0.33rem;
      &.active {
        color: #4b79f1;
        background: #fff;
        font-weight: bold;
      }
    }
  }
}
</style>
